import React, { useEffect, useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {Card, Table, DatePicker, Row, Col, Input, Button, message} from 'antd'
import {queryScheduleRecordCount, exportScheduleRecord} from '@/services/login'
const { RangePicker } = DatePicker
import moment from "moment/moment";
const Count = () => {
  const [total, setTotal] = useState(0)
  const [pageInfo, setPageInfo] = useState({
    pageNumber: 1,
    pageSize: 10,
    createTimeStart:'',
    createTimeEnd:''
  })
  const [list, setList] = useState([])
  const [createTimeStart, setCreateTimeStart] = useState('')
  const [createTimeEnd, setCreateTimeEnd] = useState('')
  const loadList = () => {
    queryScheduleRecordCount(pageInfo).then(res => {
      setList(res.data.records)
      setTotal(res.data.total)
    })
  }

  useEffect(() => {
    loadList()
  }, [pageInfo])

  const columns = [
    {
      title: '日期',
      dataIndex: 'recordTime',
      align: 'center'
    },
    {
      title: '到期数量',
      dataIndex: 'todayDueQuantity',
      align: 'center'
    },
    {
      title: '到期剩余未还数量',
      dataIndex: 'todayDueRemainNotReturnQuantity',
      align: 'center'
    },
    {
      title: '进件数量',
      dataIndex: 'todayInputPieceQuantity',
      align: 'center'
    },
    {
      title: '审核通过数量',
      dataIndex: 'todayAuditPassQuantity',
      align: 'center'
    },
    {
      title: '到期还款数量',
      dataIndex: 'todayExpireRepaymentQuantity',
      align: 'center'
    },
    {
      title: '提前还款数量',
      dataIndex: 'todayAheadTimeRepaymentQuantity',
      align: 'center'
    },
    {
      title: '逾期还款数量',
      dataIndex: 'todayOverDueRepaymentQuantity',
      align: 'center'
    }
  ]

  const PaginationOptions = {
    current: pageInfo.pageNumber,
    pageSize: pageInfo.pageSize,
    total,
    showTotal: total => {
      return `共${total}条`
    },
    onChange: pageNumber => {
      setPageInfo({ ...pageInfo, pageNumber })
    }
  }

  const styles = {
    spanWidthStyles: {
      width: '70px',
      'text-align-last': 'justify',
      display: 'inline-block'
    },
    formItemStyles: {
      width: '200px'
    }
  }
  //选择时间1
  const onChange = (dataSting) => {
    if(!dataSting[0]){
      setPageInfo({
        ...pageInfo,
      })
      setCreateTimeStart('')
      setCreateTimeEnd('')
    }
    else {
      setCreateTimeStart(moment(dataSting[0]))
      setCreateTimeEnd(moment(dataSting[1]))
    }


  }
  //查询
const onSearchBtn = () =>{
  setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
    createTimeStart:createTimeStart ? moment(createTimeStart).format('YYYY-MM-DD 00:00:00'):'',
    createTimeEnd:createTimeEnd ? moment(createTimeEnd).format('YYYY-MM-DD 23:59:59'):'',
  })
}
//重置
  const onReset = () =>{
    setPageInfo({
      pageNumber: 1,
      pageSize: 10,
      createTimeStart:'',
      createTimeEnd:'',
    })
    setCreateTimeStart('')
    setCreateTimeEnd('')
  }
  //导出
  const exportCollect = () =>{
    exportScheduleRecord({ ...pageInfo, pageNumber: -1, pageSize: -1,
      createTimeStart:createTimeStart ? moment(createTimeStart).format('YYYY-MM-DD 00:00:00'):'',
      createTimeEnd:createTimeEnd ? moment(createTimeEnd).format('YYYY-MM-DD 23:59:59'):'',
    }).then(res => {
      const objectURL = URL.createObjectURL(res)
      const btn = document.createElement('a')
      const body = document.querySelector('body')
      if (body) {
        body.appendChild(btn)
      }
      btn.download = `数据汇总表.xlsx`
      btn.href = objectURL
      btn.click()
      if (body) {
        body.removeChild(btn) // 删除标签
      }

      message.success('导出成功')
    })
  }
  return (
    <>
      <PageHeaderWrapper title="数据汇总表">
        <Card style={{ marginBottom: 20 }}>
          <Row type="flex" justify="space-between">
            <Col>
              <div>
                <span style={styles.spanWidthStyles}>日期：</span>
                <RangePicker
                  placeholder="请选择"
                  style={styles.formItemStyles}
                  onChange={onChange}
                  value={[createTimeStart,createTimeEnd]}
                />
              </div>
            </Col>
            <Col>
              <Button type="primary" onClick={onSearchBtn}>查询</Button>
              <Button type="default" onClick={onReset}>重置</Button>
              <Button type="danger" onClick={exportCollect}>导出</Button>
            </Col>
          </Row>
        </Card>
        <Card>
          <Table
            rowKey="orderNo"
            dataSource={list}
            columns={columns}
            pagination={PaginationOptions}
          />
        </Card>
      </PageHeaderWrapper>
    </>
  )
}

export default Count
